<template>
    <div class="page">
        <div v-if="foodList.length !=0">
            <shop-header @showPop="show = true" @showOverly="overlayShow=true" :hdata = "resList"></shop-header>

            <div class="nav">
                <div :class="active == 0 ? 'active' : ''" @click="active = 0">
                    商品
                </div>
                <div :class="active == 1 ? 'active' : ''" @click="active = 1">
                    评价
                </div>
            </div>
                    <transition name="van-fade">
                        <div v-if="active == 0">
                            <foods :foods = "foodList" ref="myfoods"></foods>
                        </div>
                    </transition>

                    <transition name="van-fade">
                        <div v-if="active == 1">
                            <appraise></appraise>
                        </div>
                    </transition>

               <div class="footer" v-show="active == 0">
                <div class="footermine" @click="showCart">
                    <div :class="isData ? 'cart_o active' : 'cart_o'">
                        <van-badge :content="getCart.num">
                            <van-icon name="shopping-cart-o" />
                        </van-badge>
                    </div>
                    <div class="price">
                        <div class="price_num">¥ {{ getCart.sum ? getCart.sum : '0.00' }}</div>
                        <div class="tip" v-if="$store.state.shopInfo">
                            配送费{{ $store.state.shopInfo.float_delivery_fee }}元
                        </div>
                    </div>
                </div>
                <div class="btn" v-if="getCart.sum < 20 || !getCart.sum">
                    <span v-if="getCart.sum">
                          还差¥{{20-getCart.sum }}起送
                    </span>
                    <span v-else>
                          还差¥20起送
                    </span>
                </div>
                <div class="btn over" v-else @click="goorder">
                    去结算 
                </div>

            </div>
        </div>

        <div v-else>
        <img src="@/assets/info.svg" alt="">
        </div>

        <!-- 店铺详情 -->
        <van-popup v-model="show" position="right" :style="{ height: '100%', width: '100%' }">
            <shop-detail @hidePop="show = false"></shop-detail>
        </van-popup>
        <!-- 活动详情 -->
        <van-overlay :show="overlayShow" @click="overlayShow = false" class-name="msk">
            <div class="wrapper" @click.stop>
                <h3 v-if="$store.state.shopInfo">{{ $store.state.shopInfo.name }}</h3>
                <div style="text-align:center ;margin-top: 40px;">
                    <span style="padding: 5px;font-size: 12px; border: 1px solid #999; border-radius: 40px;">优惠信息</span>
                </div>
            </div>
        </van-overlay>
        <!-- 购物车 -->
        <van-popup v-model="isCart" position="bottom">
            <div class="cartheader">
                <div>
                    购物车
                </div>
                <div @click="clearCart">
                    <van-icon name="delete-o" />
                    清空
                </div>

            </div>
            <div class="cartList">
                <div v-for="(item, index) in getCart.list" :key="index" class="cart-item">
                    <div class="item_one">
                        <div class="name">
                            {{ item.name }}
                        </div>
                        <div class="price">
                            ￥{{ item.price }}
                        </div>
                    </div>
                    <div class="item_two">
                        <div class="reduce" @click="reduce(item)">
                            -
                        </div>
                        <div class="num"> {{ item.num }}</div>
                        <div class="add" @click="add(item)">
                            +
                        </div>
                    </div>
                </div>
            </div>
        </van-popup>
      
    </div>
</template>


<script>
import shopHeader from './components/header.vue';
import shopDetail from './components/shopDetail.vue';
import foods from './components/foods.vue';
import {getRestaurant,getFoodList} from '@/api/shop'
export default {
    components: {
        shopHeader,
        foods,
        shopDetail,
        appraise:()=>import("./components/appraise.vue")
    },
    data() {
        return {
            active: 0,
            id:"",
            foodList:[],
            resList:[],
             show: false,
            overlayShow:false,
              isCart: false,

        }
    },
    async created(){
        this.id = this.$route.query.id

        let foodList = await getFoodList(this.id)
        this.foodList = foodList.data
        console.log(this.foodList)

        let resList = await getRestaurant(this.id)
        this.resList = resList.data
        console.log(this.resList)

    },
        methods: {
                   goorder(){
            this.$router.push('/com/order?id='+this.id)
        },
        //减少数量
        reduce(item){
            
                 let cartList = this.$store.state.cartList;
            // 判断当前商品数量大小是否大于1
            if(item.num>1){
                item.num --;
                this.$store.commit("addCartList",cartList)
            // 将购物车数据存储到本地
            localStorage.setItem("cartList", JSON.stringify(cartList))
            this.$refs.myfoods.getFoodsNum();
            }else{
                // 找到对应商品的商品数据
                this.foods.forEach(foods=>{
                    foods.foods.forEach(a=>{
                        if(a.item_id == item.item_id){
                            this.$set(a,'num',0)
                        }
                    })
                })
                let index = cartList[this.id].findIndex(value=>{
                    return value.sku_id == item.sku_id;
                })
                cartList[this.id].splice(index,1);
                this.$store.commit("addCartList",cartList)
                  // 将购物车数据存储到本地
               localStorage.setItem("cartList", JSON.stringify(cartList))

            }
            if(cartList[this.id].length == 0){
                this.isCart = false;
            }
        },
        // 加入购物车
        add(item){
            item.num++
            let cartList = this.$store.state.cartList;
            this.$store.commit("addCartList",cartList)
            // 将购物车数据存储到本地
            localStorage.setItem("cartList", JSON.stringify(cartList))
            this.$refs.myfoods.getFoodsNum();
        },
  
        showCart() {
            // 判断当前购物车中是否有数据
            let cartList = this.$store.state.cartList;
            if(!cartList){
                return
            }
            if (cartList[this.id].length == 0) {
                return
            }
            this.isCart = true;
        },
        // 清空购物车
        clearCart() {
            let cartList = this.$store.state.cartList;
            cartList[this.id] = [];
            // 将购物车数据存储到本地
            localStorage.setItem("cartList", JSON.stringify(cartList))
            // 更改仓库中的购物车数据
            this.$store.commit("addCartList", cartList)
            this.isCart = false;
            // 调用子组件中 计算num属性方法触发视图更新
            this.$refs.myfoods.clearView()
        }

    },
    computed: {
        isData() {
            let cartList = this.$store.state.cartList; 
            if(!cartList){
                return false;
            }
            if (!cartList.hasOwnProperty(this.id)) {
                return false
            }
            if (cartList[this.id].length == 0) {
                return false
            }
            return true;
        },
        getCart() {
            let cartList = this.$store.state.cartList;
            if(!cartList){
                return{
                    list:[],
                    num:0,
                    sum:0
                }
            }
            if (!cartList.hasOwnProperty(this.id)) {
                return []
            }
            if (cartList[this.id].length == 0) {
                return []
            }
            let list = cartList[this.id];
            let sum = 0;
            let num = 0;
            list.forEach(item => {
                num += item.num;
                // 获取每个商品总价
                let foodsPrice = item.price * item.num;
                sum += foodsPrice;
            })
            return {
                list,
                sum,
                num
            }
        },
    }
}
</script>


<style lang="less" scoped>
.page {
    padding: 0;
    background: none;

    .nav {
        display: flex;
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #e4e4e4;

        div {
            width: 50%;
            text-align: center;
            line-height: 50px;
            font-size: 15px;
            color: #666;
        }

        .active {
            color: #3190e8;
            position: relative;
        }

        .active::before {
            content: "";
            width: 40px;
            height: 2px;
            background: #3190e8;
            position: absolute;
            bottom: 7px;
            left: 50%;
            margin-left: -20px;
        }
    }

    .footer {
        width: 100%;
        height: 50px;
        background: #3d3d3f;
        position: fixed;
        bottom: 0;
        z-index: 9999;
        display: flex;
        color: #fff;
        justify-content: space-between;

        .btn {
            padding: 0 10px;
            height: 50px;
            background: #535356;
            font-size: 17px;
            font-weight: bolder;

            line-height: 50px;
        }

        .footermine {
            display: flex;

            .cart_o {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                border: 3px solid #444;
                background: #3d3d3f;
                margin-top: -20px;
                font-size: 30px;
                font-weight: bolder;
                text-align: center;
                line-height: 60px;
                margin-left: 10px;

            }

            .active {
                background: #3190e8;
            }

            .price {
                padding: 5px 10px;

                .price_num {
                    font-size: 20px;
                    font-weight: bolder;
                }

                .tip {
                    font-size: 13px;
                }
            }
        }
    }
}

.msk {
    background: #222;
    color: #fff;
}

.wrapper {
    padding: 20px 0;

    h3 {
        text-align: center;
        font-size: 23px;
        font-weight: 500;
        margin: 10px 0;
    }
}

.cartheader {
    padding: 15px 10px;
    background: #eceff1;
    font-size: 14px;
    color: #666;
    display: flex;
    justify-content: space-between;
}

.cartList {
    padding: 10px;

    .cart-item {
        display: flex;
        padding: 10px;
        font-size: 15px;

        .item_one {
            width: 80%;
            display: flex;
            justify-content: space-between;

            .name {
                font-weight: bolder;
                color: #666;
            }

            .price {
                color: #f60;
                font-weight: bolder;
            }
        }

        .item_two {
            width: 20%;
            display: flex;
            font-size: 13px;
            padding-top: 3px;

            .reduce {
                width: 15px;
                height: 15px;
                text-align: center;
                line-height: 10px;
                border-radius: 50%;
                border: 1px solid #3190e8;
                color: #3190e8;
                margin-left: 20px;
            }

            .num {
                font-size: 14px;
                margin-left: 5px;
            }

            .add {
                width: 15px;
                height: 15px;
                text-align: center;
                line-height: 15px;
                border-radius: 50%;
                background: #3190e8;
                color: #fff;
                margin-left: 5px;
            }
        }
    }
}

.over {
    color: #fff;
    background: #4cd964 !important;
    padding: 0 20px !important;
}
</style>